<template>
  <el-main class="bg edit_wrap">
    <el-form ref="form" :model="form" status-icon label-width="120px" v-if="is_view()">
      <el-row class="row_ce">
        <el-col v-if="user_group === '管理员' || $check_field('get','booking_account') || $check_field('add','booking_account') || $check_field('set','booking_account')" :xs="24" :sm="12" :lg="8"
                class="el_form_item_warp">
          <el-form-item label="预订账号" prop="booking_account">
            <div v-if="user_group !== '管理员'">
              {{ get_user_session_booking_account(form['booking_account']) }}
              <!--<el-input id="business_name" v-model="form['booking_account']" placeholder="请输入预订账号"-->
              <!--v-if="user_group === '管理员' || (form['booking_records_id'] && $check_field('set','booking_account')) || (!form['booking_records_id'] && $check_field('add','booking_account'))" :disabled="disabledObj['booking_account_isDisabled']"></el-input>-->
              <!--<div v-else-if="$check_field('get','booking_account')">{{form['booking_account']}}</div>-->
              <el-select
                  v-if="user_group === '管理员' || (form['booking_records_id'] && $check_field('set','booking_account')) || (!form['booking_records_id'] && $check_field('add','booking_account'))"
                  id="booking_account" v-model="form['booking_account']" :disabled="disabledObj['booking_account_isDisabled']">
                <el-option v-for="o in list_user_booking_account" :key="o['username']" :label="o['nickname'] + '-' + o['username']"
                           :value="o['user_id']">
                </el-option>
              </el-select>
              <el-select v-else-if="$check_field('get','booking_account')" id="booking_account" v-model="form['booking_account']" :disabled="true">
                <el-option v-for="o in list_user_booking_account" :key="o['username']" :label="o['nickname'] + '-' + o['username']"
                           :value="o['user_id']">
                </el-option>
              </el-select>
            </div>
            <el-select v-else id="booking_account" v-model="form['booking_account']" :disabled="disabledObj['booking_account_isDisabled']">
              <el-option v-for="o in list_user_booking_account" :key="o['username']" :label="o['nickname'] + '-' + o['username']"
                         :value="o['user_id']">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','booking_number') || $check_field('add','booking_number') || $check_field('set','booking_number')" :xs="24" :sm="12" :lg="8"
                class="el_form_item_warp">
          <el-form-item label="预订编号" prop="booking_number">
            <el-input id="booking_number" v-model="form['booking_number']" placeholder="请输入预订编号"
                      v-if="user_group === '管理员' || (form['booking_records_id'] && $check_field('set','booking_number')) || (!form['booking_records_id'] && $check_field('add','booking_number'))"
                      :disabled="true"></el-input>
            <div v-else-if="$check_field('get','booking_number')">{{ form['booking_number'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','user_name') || $check_field('add','user_name') || $check_field('set','user_name')" :xs="24" :sm="12" :lg="8"
                class="el_form_item_warp">
          <el-form-item label="用户姓名" prop="user_name">
            <el-input id="user_name" v-model="form['user_name']" placeholder="请输入用户姓名"
                      v-if="user_group === '管理员' || (form['booking_records_id'] && $check_field('set','user_name')) || (!form['booking_records_id'] && $check_field('add','user_name'))"
                      :disabled="disabledObj['user_name_isDisabled']"></el-input>
            <div v-else-if="$check_field('get','user_name')">{{ form['user_name'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','identity_documents') || $check_field('add','identity_documents') || $check_field('set','identity_documents')" :xs="24" :sm="12"
                :lg="8" class="el_form_item_warp">
          <el-form-item label="身份证件" prop="identity_documents">
            <el-input id="identity_documents" v-model="form['identity_documents']" placeholder="请输入身份证件"
                      v-if="user_group === '管理员' || (form['booking_records_id'] && $check_field('set','identity_documents')) || (!form['booking_records_id'] && $check_field('add','identity_documents'))"
                      :disabled="disabledObj['identity_documents_isDisabled']"></el-input>
            <div v-else-if="$check_field('get','identity_documents')">{{ form['identity_documents'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','user_gender') || $check_field('add','user_gender') || $check_field('set','user_gender')" :xs="24" :sm="12" :lg="8"
                class="el_form_item_warp">
          <el-form-item label="用户性别" prop="user_gender">
            <el-input id="user_gender" v-model="form['user_gender']" placeholder="请输入用户性别"
                      v-if="user_group === '管理员' || (form['booking_records_id'] && $check_field('set','user_gender')) || (!form['booking_records_id'] && $check_field('add','user_gender'))"
                      :disabled="disabledObj['user_gender_isDisabled']"></el-input>
            <div v-else-if="$check_field('get','user_gender')">{{ form['user_gender'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','user_phone_number') || $check_field('add','user_phone_number') || $check_field('set','user_phone_number')" :xs="24" :sm="12"
                :lg="8" class="el_form_item_warp">
          <el-form-item label="用户电话" prop="user_phone_number">
            <el-input id="user_phone_number" v-model="form['user_phone_number']" placeholder="请输入用户电话"
                      v-if="user_group === '管理员' || (form['booking_records_id'] && $check_field('set','user_phone_number')) || (!form['booking_records_id'] && $check_field('add','user_phone_number'))"
                      :disabled="disabledObj['user_phone_number_isDisabled']"></el-input>
            <div v-else-if="$check_field('get','user_phone_number')">{{ form['user_phone_number'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','route_name') || $check_field('add','route_name') || $check_field('set','route_name')" :xs="24" :sm="12" :lg="8"
                class="el_form_item_warp">
          <el-form-item label="路线名称" prop="route_name">
            <el-input id="route_name" v-model="form['route_name']" placeholder="请输入路线名称"
                      v-if="user_group === '管理员' || (form['booking_records_id'] && $check_field('set','route_name')) || (!form['booking_records_id'] && $check_field('add','route_name'))"
                      :disabled="disabledObj['route_name_isDisabled']"></el-input>
            <div v-else-if="$check_field('get','route_name')">{{ form['route_name'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','route_number') || $check_field('add','route_number') || $check_field('set','route_number')" :xs="24" :sm="12" :lg="8"
                class="el_form_item_warp">
          <el-form-item label="路线编号" prop="route_number">
            <el-input id="route_number" v-model="form['route_number']" placeholder="请输入路线编号"
                      v-if="user_group === '管理员' || (form['booking_records_id'] && $check_field('set','route_number')) || (!form['booking_records_id'] && $check_field('add','route_number'))"
                      :disabled="disabledObj['route_number_isDisabled']"></el-input>
            <div v-else-if="$check_field('get','route_number')">{{ form['route_number'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','individual_expenses') || $check_field('add','individual_expenses') || $check_field('set','individual_expenses')" :xs="24" :sm="12"
                :lg="8" class="el_form_item_warp">
          <el-form-item label="单人费用" prop="individual_expenses">
            <el-input id="individual_expenses" v-model="form['individual_expenses']" placeholder="请输入单人费用"
                      v-if="user_group === '管理员' || (form['booking_records_id'] && $check_field('set','individual_expenses')) || (!form['booking_records_id'] && $check_field('add','individual_expenses'))"
                      :disabled="disabledObj['individual_expenses_isDisabled']"></el-input>
            <div v-else-if="$check_field('get','individual_expenses')">{{ form['individual_expenses'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','number_of_bookings') || $check_field('add','number_of_bookings') || $check_field('set','number_of_bookings')" :xs="24" :sm="12"
                :lg="8" class="el_form_item_warp">
          <el-form-item label="预订人数" prop="number_of_bookings">
            <el-input-number id="number_of_bookings" v-model.number="form['number_of_bookings']"
                             v-if="user_group === '管理员' || (form['booking_records_id'] && $check_field('set','number_of_bookings')) || (!form['booking_records_id'] && $check_field('add','number_of_bookings'))"
                             :disabled="disabledObj['number_of_bookings_isDisabled']"></el-input-number>
            <div v-else-if="$check_field('get','number_of_bookings')">{{ form['number_of_bookings'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','total_amount') || $check_field('add','total_amount') || $check_field('set','total_amount')" :xs="24" :sm="12" :lg="8"
                class="el_form_item_warp">
          <el-form-item label="总计金额" prop="total_amount">
            <el-input id="total_amount" v-model="form['total_amount']" placeholder="请输入总计金额"
                      v-if="user_group === '管理员' || (form['booking_records_id'] && $check_field('set','total_amount')) || (!form['booking_records_id'] && $check_field('add','total_amount'))"
                      @focus="set_total_amount()" :disabled="disabledObj['total_amount_isDisabled']"></el-input>
            <div v-else-if="$check_field('get','total_amount')">{{ form['total_amount'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','booking_time') || $check_field('add','booking_time') || $check_field('set','booking_time')" :xs="24" :sm="12" :lg="8"
                class="el_form_item_warp">
          <el-form-item label="预订时间" prop="booking_time">
            <el-date-picker :disabled="disabledObj['booking_time_isDisabled']"
                            v-if="user_group === '管理员' || (form['booking_records_id'] && $check_field('set','booking_time')) || (!form['booking_records_id'] && $check_field('add','booking_time'))"
                            id="booking_time"
                            v-model="form['booking_time']" type="datetime" placeholder="选择日期时间">
            </el-date-picker>
            <div v-else-if="$check_field('get','booking_time')">{{ form['booking_time'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','booking_remarks') || $check_field('add','booking_remarks') || $check_field('set','booking_remarks')" :xs="24" :sm="12" :lg="8"
                class="el_form_item_warp">
          <el-form-item label="预订备注" prop="booking_remarks">
            <el-input type="textarea" id="booking_remarks" v-model="form['booking_remarks']" placeholder="请输入预订备注"
                      v-if="user_group === '管理员' || (form['booking_records_id'] && $check_field('set','booking_remarks')) || (!form['booking_records_id'] && $check_field('add','booking_remarks'))"
                      :disabled="disabledObj['booking_remarks_isDisabled']"></el-input>
            <div v-else-if="$check_field('get','booking_remarks')">{{ form['booking_remarks'] }}</div>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
          <el-form-item label="审核状态" prop="examine_state">
            <el-select id="examine_state" v-model="form['examine_state']"
                       v-if="user_group === '管理员' || (form['examine_state'] && $check_examine()) || (!form['examine_state'] && $check_examine())">
              <el-option key="未审核" label="未审核" value="未审核"></el-option>
              <el-option key="已通过" label="已通过" value="已通过"></el-option>
              <el-option key="未通过" label="未通过" value="未通过"></el-option>
            </el-select>
            <div v-else>{{ form["examine_state"] }}</div>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
          <el-form-item label="审核回复" prop="examine_reply">
            <el-input id="examine_reply" v-model="form['examine_reply']" placeholder="请输入审核回复"
                      v-if="user_group === '管理员' || (form['examine_reply'] && $check_examine()) || (!form['examine_reply'] && $check_examine())"></el-input>
            <div v-else>{{ form["examine_reply"] }}</div>
          </el-form-item>
        </el-col>


      </el-row>
      <el-col :xs="24" :sm="12" :lg="8" class="el_form_btn_warp">
        <el-form-item v-if="$check_action('/booking_records/view','set') || $check_action('/booking_records/view','add') || $check_option('/booking_records/table','examine')">
          <el-button type="primary" @click="submit()">提交</el-button>
          <el-button @click="cancel()">取消</el-button>
        </el-form-item>
        <el-form-item v-else>
          <el-button @click="cancel()">返回</el-button>
        </el-form-item>
      </el-col>

    </el-form>
  </el-main>
</template>

<script>
import mixin from "@/mixins/page.js";

export default {
  mixins: [mixin],
  data() {
    return {
      field: "booking_records_id",
      url_add: "~/api/booking_records/add?",
      url_set: "~/api/booking_records/set?",
      url_get_obj: "~/api/booking_records/get_obj?",
      url_upload: "~/api/booking_records/upload?",

      query: {
        "booking_records_id": 0,
      },

      form: {
        "booking_account": 0, // 预订账号
        "booking_number": this.$get_stamp(), // 预订编号
        "user_name": '', // 用户姓名
        "identity_documents": '', // 身份证件
        "user_gender": '', // 用户性别
        "user_phone_number": '', // 用户电话
        "route_name": '', // 路线名称
        "route_number": '', // 路线编号
        "individual_expenses": '', // 单人费用
        "number_of_bookings": 0, // 预订人数
        "total_amount": '', // 总计金额
        "booking_time": '', // 预订时间
        "booking_remarks": '', // 预订备注
        "examine_state": "未审核",
        "examine_reply": "",
        "booking_records_id": 0, // ID

      },
      disabledObj: {
        "booking_account_isDisabled": false,
        "booking_number_isDisabled": false,
        "user_name_isDisabled": false,
        "identity_documents_isDisabled": false,
        "user_gender_isDisabled": false,
        "user_phone_number_isDisabled": false,
        "route_name_isDisabled": false,
        "route_number_isDisabled": false,
        "individual_expenses_isDisabled": false,
        "number_of_bookings_isDisabled": false,
        "total_amount_isDisabled": false,
        "booking_time_isDisabled": false,
        "booking_remarks_isDisabled": false,
      },


      // 用户列表
      list_user_booking_account: [],
      // 用户组
      group_user_booking_account: "",


    }
  },
  methods: {


    /**
     * 获取注册用户用户列表
     */
    async get_list_user_booking_account() {
      var json = await this.$get("~/api/user/get_list?user_group=注册用户");
      if (json.result && json.result.list) {
        this.list_user_booking_account = json.result.list;
      } else if (json.error) {
        console.error(json.error);
      }
    },
    /**
     * 获取注册用户用户组
     */
    async get_group_user_booking_account() {
      this.form["booking_account"] = this.$store.state.user.user_id;
      var json = await this.$get("~/api/user_group/get_obj?name=注册用户");
      if (json.result && json.result.obj) {
        this.group_user_booking_account = json.result.obj;
      } else if (json.error) {
        console.error(json.error);
      }
    },
    get_user_session_booking_account(id) {
      var _this = this;
      var user_id = {"user_id": id}
      var url = "~/api/" + _this.group_user_booking_account.source_table + "/get_obj?"
      this.$get(url, user_id, function (res) {
        if (res.result && res.result.obj) {
          var arr = []
          for (let key in res.result.obj) {
            arr.push(key)
          }
          var arrForm = []
          for (let key in _this.form) {
            arrForm.push(key)
          }
          _this.form["booking_account"] = id
          _this.disabledObj['booking_account' + '_isDisabled'] = true
          for (var i = 0; i < arr.length; i++) {
            if (arr[i] !== 'examine_state' && arr[i] !== 'examine_reply') {
              for (var j = 0; j < arrForm.length; j++) {
                if (arr[i] === arrForm[j]) {
                  if (arr[i] !== "booking_account") {
                    _this.form[arrForm[j]] = res.result.obj[arr[i]]
                    _this.disabledObj[arrForm[j] + '_isDisabled'] = true
                    break;
                  } else {
                    _this.disabledObj[arrForm[j] + '_isDisabled'] = true
                  }
                }
              }
            }
          }
        }
      });
    },
    get_user_booking_account(id) {
      var obj = this.list_user_booking_account.getObj({"user_id": id});
      var ret = "";
      if (obj) {
        if (obj.nickname) {
          ret = obj.nickname;
        } else {
          ret = obj.username;
        }
      }
      return ret;
    },


    set_total_amount() {
      this.form.total_amount = parseFloat(this.form.individual_expenses) * parseFloat(this.form.number_of_bookings)
    },


    /**
     * 获取对象之前
     * @param {Object} param
     */
    get_obj_before(param) {
      var form = "";
      // 获取缓存数据附加
      form = $.db.get("form");
      $.push(this.form, form);
      if (this.form && form) {
        Object.keys(this.form).forEach(key => {
          Object.keys(form).forEach(dbKey => {
            // if(dbKey === "charging_standard"){
            // 	this.form['charging_rules'] = form[dbKey];
            // 	this.disabledObj['charging_rules_isDisabled'] = true;
            // };
            if (key === dbKey) {
              this.disabledObj[key + '_isDisabled'] = true;
            }
          })
        })
      }
      if (this.form["booking_time"] && this.form["booking_time"].indexOf("-") === -1) {
        this.form["booking_time"] = this.$toTime(parseInt(this.form["booking_time"]), "yyyy-MM-dd hh:mm:ss")
      }
      $.db.del("form");
      return param;
    },

    /**
     * 获取对象之后
     * @param {Object} json
     * @param {Object} func
     */
    get_obj_after(json, func) {

      if (json.result.obj["booking_time"] == "0000-00-00 00:00:00") {
        json.result.obj["booking_time"] = null;
      }
      if (parseInt(json.result.obj["booking_time"]) > 9999) {
        json.result.obj["booking_time"] = this.$toTime(parseInt(json.result.obj["booking_time"]), "yyyy-MM-dd hh:mm:ss")
      }


    },

    /**
     * 提交前验证事件
     * @param {Object} 请求参数
     * @return {String} 验证成功返回null, 失败返回错误提示
     */
    submit_check(param) {
      if (!param.booking_time) {
        return "预订时间不能为空";
      }
      return null;
    },

    is_view() {
      var bl = this.user_group == "管理员";

      if (!bl) {
        bl = this.$check_action('/booking_records/table', 'add');
        console.log(bl ? "你有表格添加权限视作有添加权限" : "你没有表格添加权限");
      }
      if (!bl) {
        bl = this.$check_action('/booking_records/table', 'set');
        console.log(bl ? "你有表格添加权限视作有修改权限" : "你没有表格修改权限");
      }
      if (!bl) {
        bl = this.$check_action('/booking_records/view', 'add');
        console.log(bl ? "你有视图添加权限视作有添加权限" : "你没有视图添加权限");
      }
      if (!bl) {
        bl = this.$check_action('/booking_records/view', 'set');
        console.log(bl ? "你有视图修改权限视作有修改权限" : "你没有视图修改权限");
      }
      if (!bl) {
        bl = this.$check_action('/booking_records/view', 'get');
        console.log(bl ? "你有视图查询权限视作有查询权限" : "你没有视图查询权限");
      }

      console.log(bl ? "具有当前页面的查看权，请注意这不代表你有字段的查看权" : "无权查看当前页，请注意即便有字段查询权限没有页面查询权限也不行");

      return bl;
    },
    /**
     * 上传文件
     * @param {Object} param
     */
    uploadimg(param) {
      this.uploadFile(param.file, "avatar");
    },

  },
  created() {
    this.get_list_user_booking_account();
    this.get_group_user_booking_account();
  },
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}


</style>
